<script setup>
import {useRoute} from "vue-router"
import {getDocumentOperateMenu} from "@/utils/menu.js";
import {getDocSendBasicInfo, getDocSendFinalFileInfo, getDocSendRecord} from "@/api/document/exchangeDocument.js";
import DocumentView from "@/views/document/exchange/common/documentView.vue";
import ReceiveRecordList from "@/views/document/exchange/send/receiveRecordList.vue";
import {tabFunctions} from "@/utils/tab.js";

const {proxy} = getCurrentInstance()
const activeTabName = ref('documentBasicInfo')
const route = useRoute()
const id = Number(route.params && route.params.id)
const sendRecord = ref({})
const documentInfo = ref({})
const opMenuEnum = getDocumentOperateMenu()
provide('currentMenu', opMenuEnum.exchange)
const docFinalFileInfo = ref({})
function getDocFinalFileInfo() {
  getDocSendFinalFileInfo(id).then((res)=> {
    docFinalFileInfo.value = res
  }).catch((err) => {
    proxy.$modal.alertError(err)
  })
}
getDocFinalFileInfo()
provide('getDocFinalFileInfo', docFinalFileInfo)
const {handChangeTab} = tabFunctions(activeTabName)

onMounted(() => {
  loadMainViewData()
})

function loadMainViewData() {
  if (id) {
    getDocSendRecordInfo()
    getDocBasicInfo()
  }
}

function getDocSendRecordInfo() {
  getDocSendRecord(id).then(res => {
    sendRecord.value = res
  })
}

function getDocBasicInfo() {
  getDocSendBasicInfo(id).then(res => {
    documentInfo.value = res
  })
}

const handClickTab = () => {
  //实时刷新页面数据
  loadMainViewData()
}

</script>

<template>
  <div class="app-container">
    <el-card :span="24">
      <template #header>
        <el-row style="line-height: 40px">
          <el-text type="primary" style="font-size: 18px;">{{ documentInfo.subject }}</el-text>
          <el-text class="ml10">
            <el-tag type="info" effect="plain" class="ml10">发文用户：{{ sendRecord.sendUserName }}</el-tag>
            <el-tag type="info" effect="plain" class="ml10">发文时间：{{ sendRecord.sendTime }}</el-tag>
          </el-text>
        </el-row>
      </template>
      <el-row>
        <div class="el-table el-table--enable-row-hover el-table--medium">
          <el-tabs v-model="activeTabName" @tab-change="handChangeTab" @tab-click="handClickTab">
            <el-tab-pane label="基本信息" name="documentBasicInfo" lazy>
              <DocumentView :documentInfo="documentInfo" :recordId="id"/>
            </el-tab-pane>
            <el-tab-pane label="发文记录" name="sendRecordList" lazy>
              <ReceiveRecordList :id="id"/>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-row>
    </el-card>
  </div>
</template>
